{% extends 'home.html' %}
{% block content-title %}
    <title>读者注册</title>
{% endblock %}
{% block content_main %}
    <style>
        .warning_block {
            border-color: red;
        }
    </style>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">读者注册</h3>
        </div>
        <div class="panel-body">
            <form class="form-horizontal" method="post" action="" id="reader_info">
                <div class="form-group">
                    <label for="InputUsername" class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control required_info" id="InputUsername" name="username"
                               placeholder="please enter username">
                    </div>
                </div>
                <div class="form-group">
                    <label for="InputPwd" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control required_info" id="InputPwd"
                               name="password" placeholder="please enter password">
                    </div>
                </div>
                <div class="form-group">
                    <label for="InputConfirmPwd" class="col-sm-2 control-label">确认密码</label>
                    <div class="col-sm-10">
                        <p id="message"></p>
                        <input type="password" class="form-control required_info" id="InputConfirmPwd" name="password"
                               placeholder="please enter confirm password">
                    </div>
                </div>
                <div class="form-group">
                    <label for="InputEmail" class="col-sm-2 control-label">联系邮箱</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="InputEmail" name="email"
                               placeholder="please enter email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="InputDesc" class="col-sm-2 control-label">读者简介</label>
                    <div class="col-sm-10">
                        <textarea name="desc" id="InputDesc" class="form-control"
                                  placeholder="please enter introduction"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label for="InputBirthday" class="col-sm-2 control-label">出生年月</label>
                    <div class="col-sm-10">
                        <input type="date" class="form-control" id="InputBirthday" name="birthday">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-success">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title">同好会</h3>
        </div>
        <div class="panel-body">
            【
            {% for reader in reader_all %}
                {% if forloop.last %}
                    <span>{{ reader.username }}</span>
                {% else %}
                    <span>{{ reader.username }}&emsp;|</span>
                {% endif %}
            {% endfor %}
            】
        </div>
    </div>
    {#判断非空字段是否填写#}
    <script>
        $(document).ready(function () {
            $('.required_info').blur(function () {
                var value = $(this).val();
                if (value.trim() === '') {
                    $(this).attr('placeholder', '该字段不能为空');
                    $(this).addClass('warning_block');
                } else {
                    $(this).removeAttr('placeholder');
                    $(this).removeClass('warning_block');
                }
            });
        });
    </script>
    {#判断密码是否正确#}
    <script>
        let password1 = document.getElementById("InputPwd");
        let password2 = document.getElementById("InputConfirmPwd");
        let message = document.getElementById("message");

        function validatePassword() {
            if (password1.value === password2.value) {
                message.innerHTML = "Passwords match";
                message.style.color = "green";
            } else {
                message.innerHTML = "Passwords do not match";
                message.style.color = "red";
            }
        }

        password1.addEventListener("input", validatePassword);
        password2.addEventListener("input", validatePassword);
    </script>
    {#检查是否必填项是否为空值并阻止表单提交#}
    <script>
        document.getElementById("reader_info").addEventListener("submit", function (event) {
            let username = document.getElementById("InputUsername").value;
            let password = document.getElementById("InputPwd").value;
            let confirmPwd = document.getElementById("InputConfirmPwd").value;

            if (!username || !password || password !== confirmPwd) {
                alert("请检查信息");
                event.preventDefault(); // 阻止表单提交
            }
        });
    </script>
    <script>
        $('#reader_info').submit(
            function (event) {
                event.preventDefault();
                Swal.fire({
                    title: "请确认是否注册?",
                    text: "注册成为读者，与我们一起!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    cancelButtonColor: "#d33",
                    confirmButtonText: "确认"
                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {
                        let formData = new FormData(this);
                        let jsonData = {};
                        formData.forEach((value, key) => {
                            jsonData[key] = value;
                        });
                        $.ajax({
                            url: '', // 根据你的需求填写正确的后端接口地址
                            type: 'post',
                            data: JSON.stringify(jsonData),
                            contentType: 'application/json',
                            processData: false,
                            success: function (response) {
                                // 请求成功的处理
                                Swal.fire("提交成功!", "", "success").then(() => {
                                    // 在用户确认后重定向到主页
                                    window.location.href = '{% url "reader:main" %}';
                                })
                            },
                            error: function () {
                                // 请求失败的处理
                                Swal.fire("提交失败!", "", "error");
                            }
                        });
                    }
                });
            }
        )
    </script>
{% endblock %}